<script setup lang="ts">
import { computed, defineAsyncComponent } from 'vue';
import { useStorage } from '@peng_kai/kit/libs/vueuse';

const examples = [
  { name: '按钮', component: defineAsyncComponent(() => import('./button/index.vue')) },
  { name: '气泡弹出框', component: defineAsyncComponent(() => import('./popover/index.vue')) },
  { name: '时间选择器', component: defineAsyncComponent(() => import('./date-picker/index.vue')) },
  { name: '弹窗', component: defineAsyncComponent(() => import('./modal/index.vue')) },
  { name: '安全区域', component: defineAsyncComponent(() => import('./safe-area/index.vue')) },
  { name: '卡片', component: defineAsyncComponent(() => import('./card/index.vue')) },
  { name: '币种', component: defineAsyncComponent(() => import('./currency/index.vue')) },
  { name: '数值/金额', component: defineAsyncComponent(() => import('./amount/index.vue')) },
  { name: '复制', component: defineAsyncComponent(() => import('./copy/index.vue')) },
  { name: '表单控件', component: defineAsyncComponent(() => import('./input/index.vue')) },
  { name: '表格', component: defineAsyncComponent(() => import('./table/index.vue')) },
  { name: '加载', component: defineAsyncComponent(() => import('./suspense/index.vue')) },
  { name: '容器查询', component: defineAsyncComponent(() => import('./container-query/index.vue')) },
  { name: '头像', component: defineAsyncComponent(() => import('./avatar/index.vue')) },
  { name: '游戏', component: defineAsyncComponent(() => import('./game-comp/index.vue')) },
  { name: '业务弹窗', component: defineAsyncComponent(() => import('./business-popups/index.vue')) },
];
const exampleName = useStorage('EXAMPLE_NAME', examples[0].name);
const exampleComponent = computed(() => examples.find(e => e.name === exampleName.value)?.component);
</script>

<template>
  <div>
    <h1>例子</h1>
    <div class="mb-4 flex flex-wrap gap-2">
      <div
        v-for="item of examples" :key="item.name"
        class="cursor-pointer rounded bg-slate/20 px-4 py-2"
        :class="item.name === exampleName ? 'text-red' : ''"
        @click="exampleName = item.name"
      >
        {{ item.name }}
      </div>
    </div>

    <component :is="exampleComponent" />
  </div>
</template>
